<%@ page language="java"
         contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"
         import="com.shxt.hotel.background.Room"
         import="java.util.Map"
         import="java.util.List"
         import="com.shxt.hotel.background.Staff"
%>
<%
    Staff staff = new Staff();
    
    if(session.getAttribute("staff_id") == null){
        response.sendRedirect("./login.jsp");
    }else{
        // get current Staff
        request.setCharacterEncoding("UTF-8");
        int staff_id = (int)session.getAttribute("staff_id");

        /*
            room object
        */
        Room room = new Room();
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <link rel="shortcut icon" href="../Public/img/favicon.html">

    <title>Room Add</title>

    <!-- Bootstrap core CSS -->
    <link href="../Public/css/bootstrap.min.css" rel="stylesheet">
    <link href="../Public/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="../Public/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="../Public/css/style.css" rel="stylesheet">
    <link href="../Public/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="../Public/js/html5shiv.js"></script>
      <script src="../Public/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <section id="container" class="">
         <!--header start-->
        <jsp:include page="./Public/header.jsp" flush="true"/>
        <!--header end-->
        <!--sidebar start-->
        <jsp:include page="./Public/sidebar.jsp" flush="true"/>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <!-- page start-->
                <div class="row">
                    <div class="col-lg-12">
                        <section class="panel panel-primary">
                            <header class="panel-heading">
                                Room Add
                            </header>
                            <div class="panel-body">
                                
                                <form class="form-horizontal" id="default" action="./background/room_add_do.jsp" method="post">
                                
                                    <input type="hidden" name="is_sub" value="0">
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">Room Number</label>
                                        <div class="col-lg-10">
                                            <input name="id" type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">Category</label>
                                        <div class="col-lg-10">
                                            <select id="room_category_select" name="category" class="form-control m-bot15" onchange="changeCategory()">
                                                <%
                                                    // loop for room_category
                                                    List<Map<String, Object>> categoryList = room.getCategories("*");
                                                    for(int i = 0; i < categoryList.size(); i++){
                                                %>
                                                        <option value='<%=categoryList.get(i).get("id")%>'><%=categoryList.get(i).get("title") %></option>
                                                <%
                                                    }
                                                %>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">intro</label>
                                        <div class="col-lg-10">
                                            <textarea id="room_add_category_intro" class="form-control ckeditor" rows="6" readonly>Deluxe Room</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">Price</label>
                                        <div class="col-lg-10">
                                            <input id="room_add_category_price" type="text" class="form-control" value="799.9$/day" readonly>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label"></label>
                                        <div class="col-lg-10">
                                            <span id="room_add_category_single_bed" class="label label-primary" style="display: none;"><span class="icon-male"></span> Single</span>
                                            <span id="room_add_category_double_bed" class="label label-primary"><span class="icon-male"></span><span class="icon-female"></span> Double</span>
                                            <span id="room_add_category_wifi" class="label label-primary"><span class="icon-rss"></span> Wifi</span>
                                            <span id="room_add_category_bathroom" class="label label-primary"><span class="icon-tint"></span> Bathroom</span>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">Area</label>
                                        <div class="col-lg-10">
                                            <input id="room_add_category_area" type="text" class="form-control" value="100mm ~ 200mm" readonly>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <div class="col-lg-offset-2 col-lg-10">
                                            <button class="btn btn-info" type="submit">Submit</button>
                                        </div>
                                    </div>
                                        
                                </form>
                            </div>
                        </section>
                    </div>
                </div>
                <!-- page end-->
            </section>
        </section>
        <!--main content end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="../Public/js/jquery.js"></script>
    <script src="../Public/js/bootstrap.min.js"></script>
    <script src="../Public/js/jquery.scrollTo.min.js"></script>
    <script src="../Public/js/jquery.nicescroll.js" type="text/javascript"></script>



    <!--common script for all pages-->
    <script src="../Public/js/common-scripts.js"></script>

    <!--script for this page-->
    <script src="../Public/js/jquery.stepy.js"></script>
    
    <!-- script by myself -->
    <script src='../Public/Cus/js/room_add.js'></script>


    <script>
        //step wizard

      $(function() {
          $('#default').stepy({
              backLabel: 'Previous',
              block: true,
              nextLabel: 'Next',
              titleClick: true,
              titleTarget: '.stepy-tab'
          });
      });
    </script>
    
    <!--scripted by myself-->
    <script>
        $("#Hotel_Room").addClass("active");
        $("#room_add_sidebar").addClass("active");
        
        function changeCategory(){
            var selectElem = document.getElementById("room_category_select");
            var cid = selectElem.value;
            ajaxDoc(cid);
            // alert(objJSON);
            
            // var cateObj = JSON.parse(objJSON);
            // alert(cateObj);
        }
    </script>


</body>

</html>
<%
        room.close();
    }
%>